<template>
  <div class="detail-box">
    <!-- 导航 search  -->
    <detail-logo></detail-logo>
    <div class="detail" v-loading="loading">
      <detail-nav :name="detail.name">
        <span class="hr"></span>
        <button class="purchase" @click="addcar">立即购买</button>
      </detail-nav>
      <div class="banner-one">
        <div class="title">小米8</div>
        <div class="des">8周年旗舰版</div>
        <div class="para">
          全球首款双频 GPS | 骁龙845 | AI 变焦双摄 | 红外人脸识别
        </div>
        <div class="price">￥2599 <del>￥2999</del></div>
      </div>
      <div class="banner-two">
        <img src="/imgs/product/product-bg-2.png" alt="" />
      </div>
      <div class="banner-three">
        <img src="/imgs/product/product-bg-3.png" alt="" />
      </div>
      <div class="item-swiper">
        <swiper :options="swiperOption">
          <swiper-slide
            ><img src="/imgs/product/gallery-2.png" alt=""
          /></swiper-slide>
          <swiper-slide
            ><img src="/imgs/product/gallery-3.png" alt=""
          /></swiper-slide>
          <swiper-slide
            ><img src="/imgs/product/gallery-4.png" alt=""
          /></swiper-slide>
          <swiper-slide
            ><img src="/imgs/product/gallery-5.jpg" alt=""
          /></swiper-slide>
          <swiper-slide
            ><img src="/imgs/product/gallery-6.jpg" alt=""
          /></swiper-slide>
          <!-- Optional controls -->
        </swiper>
        <div class="swiper-pagination" slot="pagination"></div>
        <p class="desc">小米8 AI变焦双摄拍摄</p>
      </div>
      <div class="video-container">
        <div class="title">
          60帧超慢动作摄影 <br />
          慢慢回味每一瞬间的精彩
        </div>
        <div class="desc">
          后置960帧电影般超慢动作视频，将眨眼间的美妙展现得淋漓尽致！ <br />
          更能AI 精准分析视频内容，15个场景智能匹配背景音效。
        </div>
        <div class="video-img" @click='openVideo'>
          <img src="/imgs/product/gallery-1.png" />
        </div>
      </div>
    </div>
    <div class="video-box" ref="videoBox">
      <video src="/imgs/product/video.mp4" :autoplay='play' controls></video>
          <span class="icon-close iconfont" @click="closeVideoBox"></span>
    </div>
  </div>
</template>

<script>
import DetailLogo from "../../components/Logo";
import DetailNav from "./components/DetailNav";
export default {
  name: "Product",
  components: {
    DetailLogo,
    DetailNav
  },
  data() {
    return {
      loading: true,
      detail: {},
      play: false,
      id: this.$route.params.id,
      swiperOption: {
        autoplay: true,
        slidesPerView: 3,
        spaceBetween: 20,
        freeMode: true,
        uniqueNavElements: false,
        loop: true,
        pagination: {
          el: ".swiper-pagination",
          clickable: true,
        },
      },
    };
  },
  mounted(){
    this.getProductInfo()
  }, 
  methods: {
    getProductInfo(){
      let id = this.$route.params.id
      this.axios.get("/products/"+id).then(res => {
        // console.log(res)
        this.detail = res;
        this.loading = false
      },() => {
        this.loading = false
      })
    },
    addcar(){
        let id = this.$route.params.id;
        this.$router.push(`/index/detail/${id}`)
    },
    openVideo(){
      let videoBox = this.$refs.videoBox;
      videoBox.style.top = "50%";
      videoBox.style.opacity = 1;
      this.play = true;
    },
    closeVideoBox(){
      this.play = false;
      this.$refs.videoBox.style.top = "-50%"
      this.$refs.videoBox.style.opacity = 0;
    }
  }
};
</script>

<style lang="scss">
.detail {
  font-family: PingFang SC;
  font-weight: bold;
  // 第一个 图片
  .banner-one {
    height: 718px;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: url("/imgs/product/product-bg-1.png") no-repeat center center;
    color: #333333;
    .title {
      font-size: 80px;
      margin-top: 55px;
    }
    .des {
      font-size: 24px;
    }
    .para {
      font-size: 16px;
      color: #777;
      margin-top: 10px;
    }
    .price {
      font-size: 38px;
      margin-top: 30px;
      del {
        font-size: 26px;
      }
    }
  }
  // 第二个图片
  .banner-two {
    margin: 38px auto 45px;
    display: flex;
    justify-content: center;
    img {
      height: 397px;
    }
  }
  // 第三个图片
  .banner-three {
    height: 638px;
    margin-bottom: 0 auto 36px;
    display: flex;
    justify-content: center;
    img {
      height: 638px;
    }
  }
  // 轮播
  .item-swiper {
    margin: 36px auto 52px;
    .swiper-pagination {
      position: static;
      margin: 30px 0 20px;
    }
    .swiper-pagination-bullet {
      width: 30px;
      height: 5px;
      background: #ccc;
      border-radius: 0;
      margin: 0 10px;
    }
    .desc {
      font-size: 18px;
      color: #333333;
      text-align: center;
    }
    img {
      width: 100%;
    }
  }
  // 开启视频区
  .video-container {
    height: 1044px;
    background: #070708;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #ffffff;
    margin-bottom: 50px;
    .title {
      font-size: 60px;
      margin: 80px 0 47px;
    }
    .desc {
      font-size: 24px;
      margin-bottom: 58px;
    }
    .video-img {
      width: 1226px;
      height: 540px;
      img {
        width: 100%;
      }
    }
  }
}

  .video-box{
    width: 600px;
    position: fixed;
    top: -50%;
    left: 50%;
    opacity: 0;
    transform: translate(-50%,-50%);
    transition: all .5s;
    video{
      width: 100%;
      outline: none;
    }
    .icon-close{
      position: absolute;
      top: 10px;
      right: 10px;
      color: rgba(238, 36, 36, 0.596)
    }
  }
</style>